<template>
  <div class="container">
    <el-dialog
      title="服务收益"
      :visible.sync="dialogVisible"
      width="70%"
    >
      <div class="header-info">
        <div class="header-info-item bold">
          账号:{{ memberInfo.nickName }}|{{ memberInfo.mobile }}
        </div>
        <div class="header-info-item">
          <div>预估服务收益</div>
          <div class="bold">￥{{settle_revenue}}</div>
        </div>
        <div class="header-info-item">
          <div>结算服务收益</div>
          <div class="bold">￥{{ unsettle_revenue }}</div>
        </div>
        <div>
          <el-form
          ref="from"
          :model="query"
          :inline="true"
        >
          <el-form-item label=""  >
            <el-date-picker
      
                v-model="rongDate"
                size="mini"
                clearable
                range-separator="至"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
                :type="'datetimerange'"
                :format="'yyyy-MM-dd HH:mm:ss'"
                :value-format="'yyyy-MM-dd HH:mm:ss'"
              />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" size="mini" @click="handleSearch">搜索</el-button>
          </el-form-item>
        </el-form>
        </div>
      </div>
      <el-table
        :data="serviceIncomeData"
        style="width:100%"
        max-height="500"
      >
        <el-table-column prop="createdAt" label="时间" >
          
          <template slot-scope="scope">
            <span>{{parseTime(scope.row.createdAt)}}</span>
          
          </template>
        </el-table-column>
        <el-table-column prop="commission" label="预估服务收益">
          <template slot="header">
            <span>预估服务收益</span>
            <el-tooltip class="item" effect="dark" content="指上一个自然月内，即上月1日到月底最后一天已经确认收货的预估收入数据" placement="top">
              <i class="el-icon-info"/>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column prop="actualCommission" label="结算收益">
          <template slot="header">
            <span>结算收益</span>
            <el-tooltip class="item" effect="dark" content="可结算的服务佣金收入" placement="top">
              <i class="el-icon-info"/>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>
      <el-col :span="24">
        <div class="page">
          <el-pagination background @current-change="listPageChange"
            :current-page="querys.pageNum" :page-size="querys.pageSize"
            layout="total, prev, pager, next, jumper" :total="total"></el-pagination>
        </div>
      </el-col>
    </el-dialog>
  </div>
</template>

<script>
import {
  getMemberProfitList,
} from '@/api/member'
import { getShopServiceOrders, getIncomesStatistic } from '@/api/myProfit'
export default {
  props: {
    uid: {
      type: Number,
      default: 0
    },
    tableData: {
      type: Array,
      default: () => []
    },
    balance: {
      type: Number,
      default: 2000
    },
    memberInfo: {
      type: Object,
      default: () => {
        return {
          name: '',
          mobile: '',
          profit_predict: '',
          profit_settled: ''
        }
      }
    }
  },
  watch: {
    uid(newV, oldV) {
      console.log(newV, oldV,'uid111111111')
      // this.id = newV
      // this.disabled = false
      // if (this.action ===1) {
        this.getMemberProfitList()
      // }

    },
  },

  data() {
    return {
      settle_revenue:0,
      unsettle_revenue:0,
      serviceIncomeData: [],
      rongDate:[],
      dialogVisible:false,
      query:{
        startTime:"",
        endTime:"",
        id: this.uid
      },
      total:0,
      querys:{
        adminId: this.uid,
        pageNum:1,
        pageSize:10,
            /**
           * 订单创建开始时间
           */
          beginTime:'',
          /**
           * 佣金状态 2：未结算 3：已结算 4：已失效
           */
          commissionStatus:0,
          /**
           * 订单创建结束时间
           */
          endTime:'',
          /**
           * 搜索
           */
          keyword:'',
          /**
           * 购买用户ID
           */
          memberId:0,
          /**
           * 购买用户账号
           */
          mobile:'',
          /**
           * 订单编号
           */
          orderNo:'',
          /**
           * 订单状态 1待支付 5：已支付待核销 10：已核销（已完成）15：已取消（订单未支付）20：已失效（关闭）
           */
          orderStatus:undefined,
          /**
           * 订单类型（收益类型） 4小店买单（优惠买单） 5小店商品 20红包充值 6平台商品
           */
          orderType:undefined,

          /**
           * 合伙人id
           */
          partnerId:sessionStorage.getItem('partnerId'),
          /**
           * 分销平台
           * TAOBAO :TAOBAO
           * JDCOM :JDCOM
           * PINDUODUO :PINDUODUO
           * VIPSHOP :VIPSHOP
           */
          platform:undefined,
          /**
           * 小店id
           */
          sellerId:undefined,
          /**
           * 服务经理账号
           */
          serviceMobile:'',

      },
    }
  },
  methods: {
    listPageChange(page){
      this.querys.pageNum = page
      this.getMemberProfitList()
    }, 
      
    getMemberProfitList() {
      // const params = {
      //   uid: this.uid
      // }
      this.querys.adminId = this.uid
      getShopServiceOrders(this.querys).then(res => {
        if (res.code === 200) {
          // if (params.is_export === 1) {
          // window.open(
          //   `${API_BASE_URL}/admin/download/zip/${res.data[1].download_token}`
          // )
          // } else {
          //   res.data.data.forEach(item => {
          //     item.order_type = item.order_type === 20 ? '优惠买单' : item.order_type === 30 ? "会员充值" : item.order_type === 31 ? '会员续费充值' : '红包充值'
          //     item.status = item.status === 0 ? '待收益' : item.status === 1 ? "已收益" : item.status === 2 ? '已失效' : '冻结中'
          //   })
            this.serviceIncomeData = res.data.list
            this.total = res.data.total
            this.unsettle_revenue=res.data.settledMoney // 未结算收益
            this.settle_revenue=res.data.unSettledMoney // 已结算收益
          // }
        } else {
        this.$message.error(res.message)
        }
      })
      // getMemberProfitList(this.query).then(res => {
      //   if (res.code === 200) {
      //     this.serviceIncomeData = res.data.list
      //     this.settle_revenue=0
      //     this.unsettle_revenue=0
      //   } else {
      //     this.$message(res.message)
      //   }
      // })
    },
    show() {
      this.dialogVisible = true
    },
    handleSearch(formValue) {
      // this.page = 1
      if (this.rongDate.length) {
        this.querys.beginTime = this.rongDate[0]+''
        this.querys.endTime = this.rongDate[1]+''
        // delete formValue.createTime
      }
    
      this.getMemberProfitList()

    },
    handleReset() {
      this.getMemberProfitList()
      // this.query.pageNum = 1
     
      // this.getData()
      // this.getStatistic({})
    },
  }
}
</script>

<style lang="scss" scoped>
.container {
  ::v-deep .el-dialog__body {
    padding: 15px 20px;
    height: 680px;
  }
  ::v-deep .el-dialog__header {
    border-bottom: 1px solid #ddd;
  }
  .header-info {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0px;
    .header-info-item {
      display: flex;
      flex-direction: column;
      align-items: center;
    }
    .bold {
      font-weight: bold;
    }
  }
}
</style>